import React, { PureComponent } from 'react';
import {
    WingBlank,
    Flex,
    WhiteSpace,
    Icon,
} from 'antd-mobile';
import Img from '../../components/Img/Img';
import { store_info } from './StoreInfo.less';
import kefu from '../../assets/svg/kefu.svg';
import storesvg from '../../assets/svg/storesvg.svg';
import {routerRedux} from "dva/router";

export default class StoreInfo extends PureComponent {

    render() {
        const { storeLabel, storeName , evaluateNum =0, storeGoodsNum, storeTrendsNum, storeDescription, evaluateStore={},storeId,dispatch} = this.props;
        const { averageCredits=0, sevalDesccredit=0, sevalServicecredit=0, sevalDeliverycredit=0 } = evaluateStore;


        console.warn(storeId, 'storeId');
        return (
            <div className={store_info} onClick={() => {if(+storeId!=0)this.props.dispatch(routerRedux.push({pathname: `/storesShow/${storeId}`}))}}>

              <Flex style={{ padding:"0.2rem 0rem" }} justify="between">
                <Flex>
                  <div className="sImg">
                    <Img src={storeLabel}/>
                  </div>

                  <Flex className="name_description" align="start" direction="column">
                    <div className="text-overflow-hidden name">{storeName}</div>
                    <div className="text-overflow-hidden description">{storeDescription}</div>
                  </Flex>
                </Flex>
                  {storeId==0?"":<div style={{ color:"#333" }}>综合评分<span style={{ color:'#6ba820', margin:'0rem 0.1rem' }}>{parseFloat(averageCredits).toFixed(1)}</span>分</div>}

              </Flex>

                {
                    storeId==0?'':
                      <div>
                          <WhiteSpace />
                          <Flex className="evaluate_store" align="stretch">
                              <Flex.Item>
                                  <Flex style={{ height:'100%'}} justify="around" direction="column">
                                      <div>{ storeGoodsNum }</div>
                                      <div  style={{ color: "#999", fontSize:'0.22rem' }}>全部商品</div>
                                  </Flex>
                              </Flex.Item>
                              <Flex.Item>
                                  <Flex style={{ height:'100%'}} justify="around" direction="column">
                                      <div>{ evaluateNum }</div>
                                      <div style={{ color: "#999", fontSize:'0.22rem' }}>关注人数</div>
                                  </Flex>
                              </Flex.Item>
                              <Flex.Item>
                                  <Flex style={{ height:'100%'}} justify="around" direction="column">
                                      <div>{ storeTrendsNum }</div>
                                      <div style={{ color: "#999", fontSize:'0.22rem' }}>店铺动态</div>
                                  </Flex>
                              </Flex.Item>
                              <Flex.Item>
                                  <Flex style={{ height:'100%'}} justify="around" direction="column">
                                      <div style={{ color: "#333", fontSize:".2rem" }}>
                                          商品<span style={{ color:'#6ba820', margin:'0rem 0.1rem' }}>{parseFloat(sevalDesccredit).toFixed(1)}</span>
                                      </div>
                                      <div style={{ color: "#333" , fontSize:".2rem", marginTop:"0.1rem"}}>
                                          服务
                                          <span style={{ color:'#6ba820', margin:'0rem 0.1rem' }}>{parseFloat(sevalServicecredit).toFixed(1)}</span>
                                      </div>
                                      <div style={{ color: "#333" , fontSize:".2rem", marginTop:"0.1rem"}}>
                                          物流<span style={{ color:'#6ba820', margin:'0rem 0.1rem' }}>{parseFloat(sevalDeliverycredit).toFixed(1)}</span>
                                      </div>
                                  </Flex>
                              </Flex.Item>
                          </Flex>
                          <WhiteSpace />
                      </div>
                }

                {
                    storeId != 0 ?
                   <Flex className="store_btn">
                      {/*<Flex.Item style={{ borderRight:"0.01rem solid #ebebeb" }}>*/}
                        {/*<Icon type={kefu.id} />联系客服*/}
                      {/*</Flex.Item>*/}
                       <Flex.Item onClick={() => {if(+storeId!=0)this.props.dispatch(routerRedux.push({pathname: `/storesShow/${storeId}`}))}}>
                           <Icon type={storesvg.id} />进入店铺
                       </Flex.Item>
                   </Flex> : ''
                }
            </div>
        )
    }
}
